<template>
  <div class="finddeitem">
    <div
      class="item"
      v-for="(i, index) in list"
      :key="index"
      @click="playvideo(i.resource ? i.resource.id : i.id)"
    >
      <div class="imgbox">
        <img :src="i.resource ? i.resource.cover : i.cover " alt="" />
        <span>{{
          i.resource ? i.resource.duration : i.duration | delaytime
        }}</span>
      </div>
      <div class="content">
        <span class="title">{{ i.resource ? i.resource.title : i.title }}</span>
        <div class="count">
          <span
            >播放量{{
              i.resource
                ? i.resource.count.count_view
                : i.count.count_view | count
            }}·喜欢{{
              i.resource
                ? i.resource.count.count_like
                : i.count.count_like | count
            }}</span>
        </div>
        <div class="user">
          <img
            v-if="
              !(i.resource
                ? i.resource.author.userinfo.is_vmovier_migrate_user
                : i.author.userinfo.is_vmovier_migrate_user)
            "
            :src="
              i.resource
                ? i.resource.author.userinfo.avatar
                : i.author.userinfo.avatar
            "
            alt=""
          />
          <span>{{
            i.resource
              ? i.resource.author.userinfo.username
              : i.author.userinfo.username
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
  created() {},
  methods: {
    playvideo(id) {
        this.$router.push({ path: "/playvideoview" ,query:{id:id}});
        
    },
  },
};
</script>

<style lang="less" scoped>
.finddeitem {
  width: 100%;
  background-color: #fff;
  .item {
    display: flex;
    align-items: center;
    height: 120px;
    padding: 10px 0px;
    border-bottom: 1px solid #f0f0f0;
    .imgbox {
      width: 50%;
      margin-right: 15px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
        height: auto;
        display: block;
      }
      span {
        font-size: 12px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        color: white;
      }
    }
    .content {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .title {
        font-weight: 600;
        font-size: 15px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .count {
        span {
          font-size: 12px;
          color: #aaa;
        }
      }
      .user {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 8px;
        }
        span {
          font-size: 12px;
          color: #888;
          font-weight: 600;
        }
      }
    }
  }
}
</style>